<template>
  <TabGrayEasyCard title="费用分析" @onMore="jumpDetailPage" :tabs="card.tabs" :curTab="card.curTab"
    :tabRight="card.tabRight" :grayCardList="card.grayCardList" @onChange="queryList"
    v-btnPermi="{ permi: props.permi, noReport: true, isHiden: true, hideList: props.hideList }">
      <hsPageTable 
        :stripe="false"
        :isHaveIndex="false"
        :isHavePage="false"
        :tableData="tableData.data"
        :cloumns="tableData.columns"
      />
  </TabGrayEasyCard>
</template>

<script setup lang="jsx">
import TabGrayEasyCard from '@/DbComponents/tabGrayEasyCard'
import dashBoardApi from '@/api/Manage/Business/dashBoard';
import { formatArea, decimalRound } from '@/utils/publicUtils'
import { reportLog } from '@/utils/reportLog'
import { reactive, watch, computed } from 'vue'
import { useRouter, useRoute} from 'vue-router'

const router = useRouter()
const route = useRoute()
let {tabPermi, bizType} = route.query

const props = defineProps({
  permi: {
    type: String,
    required: false,
    default: ''
  },
  hideList: {
    type: Array,
    required: false,
  },
  biProjectCode: {
    type: String,
    required: true,
    default: ''
  },
  projectCode: {
    type: String,
    required: true,
    default: ''
  },
  updateDate: {
    type: String,
    required: false,
    default: ''
  }
})

let card = reactive({
  tabs: [{ label: '累计', value: '累计' }],
  curTab: '累计',
  tabRight: '',
  curDate:'',
  grayCardList:[
    { label: '预算GOP率', value: '', unit: '%', color: ''},
    { label: '依据GOP率', value: '', unit: '%', color: ''},
    { label: '实际GOP率', value: '', unit: '%', color: ''},
  ]
})

let tableData = reactive({
  data:[],
  columns:[
    {prop:'courseName',label:'科目',align:'left' },
    {prop:'ysCost',label:'预算',align:'right', type:'html', render: ({row},empty)=> rowRender(row,empty,'ysCost')},
    {prop:'jyCost',label:'依据',align:'right',type:'html', render: ({row},empty)=> rowRender(row,empty,'jyCost')},
    {prop:'sjCost',label:'实际',align:'right',type:'html', render: ({row},empty)=> rowRender(row,empty,'sjCost')},
    {prop:'conclusion',label:'结论',align:'center',type:'html', render: ({row},empty)=> rowRender(row,empty,'conclusion') },
  ]
})
// 表格数据
let dictObj = {
  1: { dictLabel: '合格', dictValue: 1 },
  2: { dictLabel: '不合格', dictValue: 2 },
  3: { dictLabel: '改进', dictValue: 3 },
}
function rowRender(row,empty,key) {
  if (!row[key] && row[key] !== 0) return <span>{empty}</span>
  let curVal = row[key]
  if (key !== 'conclusion') {
    curVal = formatArea(Math.round(row[key] / 10000) , 0)
    return <span>{curVal}</span>
  } else {
    let curLabel = dictObj[row[key]]?.dictLabel || empty
    return <span class={{'zs-text-red':row[key] == 2,'zs-text-green':row[key] == 1,'zs-text-orange':row[key] == 3}}>{curLabel}</span>
  }
}


async function queryList() {
  let res = null
  let name = ''
  if (['HOTEL', 'APARTMENT'].includes(bizType)) {
    name = 'GOP'
    res = await dashBoardApi.costAnalysisHotelCardListApi({projectCode:props.projectCode}).then(res=>res)
  } else {
    name = 'EBITDA'
    res = await dashBoardApi.costAnalysisBusinessCardListApi({biProjectCode:props.biProjectCode, bizType}).then(res=>res)
  }
  let resData = res.data
  if(resData.code == 200){
    let dateArr = resData.data[0].rightTime?.split('-')
    card.tabRight = `${dateArr[0].slice(2)}-01~${dateArr[0].slice(2)}-${dateArr[1]}`
    card.curDate = resData.data[0].rightTime
    let GopRow = false
    for(let i = resData.data.length - 1; i>=0; i--){
      if (resData.data[i].courseName.indexOf(name) > -1) {
        GopRow = resData.data[i]
        resData.data.splice(i,1)
      }
    }
    let keyArr = [
      {label:'预算', key:'ysCost'},
      {label:'依据', key:'jyCost'},
      {label:'实际', key:'sjCost'},
    ]
    card.grayCardList.forEach((el,index)=>{
      el.value = GopRow ? decimalRound(GopRow[keyArr[index].key],1) : '-'
      el.label = `${keyArr[index].label}${name}率`
    })
    // card.grayCardList[0].value = GopRow?.ysCost || '-'
    // card.grayCardList[1].value = GopRow?.jyCost || '-'
    // card.grayCardList[2].value = GopRow?.sjCost || '-'
    tableData.data = resData.data
  }
}
queryList()


function jumpDetailPage () {
  reportLog({
    type: 4,
    resourceKey: props.permi,
  })
  // 跳转两算一控的下钻页
  router.push({
    path: '/page/routeController/index',
    // path: '/Manage/Business/costControlAnalysis',
    query: {
      rid: 'Manage_Business_CostControlAnalysis',
      rTitle: '费控分析',
      biProjectCode: props.biProjectCode,
      projectCode: props.projectCode,
      updateDate: props.updateDate,
      tabPermi: tabPermi,
      curDate: card.curDate,
      bizType,
    },
  })
}

const biProjectCode = computed(() => {
    return props.biProjectCode
});
watch(biProjectCode, () => {
    queryList()
}, { deep: true });

</script>

<style scoped lang="scss">
:deep(#my-table){
  height: 100%;
  .el-scrollbar__view{
    height: 100%;
  }
  .img-icon {
    position: relative;
    top: 3px;
    width: 14px;
    margin: 0 2px;
  }
  .el-table__inner-wrapper{
    &::before{
      z-index: -1;
    }
  }
}
</style>
